<template>
  <div ref="chartContainerright1" style="padding: 5px;width: 100%;height: 100%"></div>

  <a-modal :title="state.popupTitle" v-model:visible="state.popVisible" :footer="false" width="830px">
    <div ref="chartContainerright1_1" style="padding: 5px;width: 780px;height: 500px;background-color: #6aa1ff"></div>
  </a-modal>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
  popVisible:false,
  popupTitle : '',
})

const chartContainerright1 = ref(null);
const chartContainerright1_1 = ref(null);
const createCharts = ()=>{
  const chartInstance = echarts.init(chartContainerright1.value);
  const option = {
    title: {
      text: '2024年3月设备开机率',
      right:'10px',
      textStyle:{
        color:'#ffffff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    series: [
      {
        type: 'gauge',
        radius: "90%",
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [0.3, '#fd666d'],
              [0.7, '#37a2da'],
              [1, '#67e0e3 ']
            ]
          }
        },
        pointer: {
          width:30,
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        splitLine: {
          distance: -30,
          length: 30,
          lineStyle: {
            color: '#fff',
            width: 4
          }
        },
        axisLabel: {
          color: 'inherit',
          distance: 40,
          fontSize: 20
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%',
          color: 'inherit'
        },
        data: [
          {
            value: 66.7
          }
        ]
      }
    ]
  };
  chartInstance.setOption(option);

  chartInstance.on('click',function (param){
    state.popupTitle = '设备开机率'
    state.popVisible = true
    nextTick(()=>{
      createCharts_2();
    })
  })
}
const createCharts_2 = ()=>{
  const chartInstance = echarts.init(chartContainerright1_1.value);
  const option = {
    // ECharts 配置项
    title: {
      text: '2024年3月设备开机率',
      textStyle:{
        color:'#ffffff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b0}: {c0}%',
    },
    grid: {
      left: '16px',
      top:'16px',
      right: '16px',
      bottom: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['风能装备', '核能装备', '海工装备', '调质钢', '传动装备', '耐磨介质', '核海新材料'],
      axisLine: {   //x轴的样式
        show: false,
        lineStyle: {
          color: "#ffffff",
          width: 1,
          type: "solid"
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel:  {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {   //y轴的样式
        show: false,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        show:false,
        formatter: '{value}%',
        textStyle: {
          color: "#ffffff",
          fontSize: '12',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      }
    },
    series: [{
      name: '产量',
      type: 'bar',
      barWidth:'45%', //柱子宽度
      itemStyle: {
        normal: {
          //color:'#2f89cf',
          color:'#249b9b',
          opacity: 1,
          barBorderRadius: 5,
        }
      },
      label: {
        show: true, // 显示数值
        color:"#ffffff",
        formatter:'{c}%',
        position: 'top' // 在顶部显示
      },
      data: [66.7, 62.6, 59.8, 63.7, 64.8, 70.3, 77.6]
    }]
  };
  chartInstance.setOption(option);
}
onMounted(()=>{
  createCharts();
})
</script>

<style lang="less" scoped>

</style>
